<template>
  <div>
    
    <!-- 顶部组件 -->
    <header-nav></header-nav>
    <!-- 轮播图 -->
    <div class="banner">
      <div class="imgs">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="(item,index) in imgs" :key="index">
            <img :src="item.pic" />
          </van-swipe-item>
        </van-swipe>
      </div>
    </div>

    <!-- 推荐歌单 -->
    <div class="remLists">
      <!-- <div class="title"><span>推荐歌单</span></div> -->
      <router-link to="/more" tag="div" class="title"><span>推荐歌单</span><span class="more">更多<span class="iconfont icon-xiangyoujiantou arright"></span></span></router-link>
      <div class="content">
        <ul>
          <!-- <router-link to="/songlists" tag="li" v-for="item in Personalizedr" :key="item.id" @click="slId(item.id)"> -->
            <!-- <li > -->
              <router-link tag="li" v-for="item in Personalizedr" :key="item.id" :to="'/songlists?id='+item.id">
                <div class="img">
                  <img
                    :src="item.picUrl"
                  />
                </div>
                <p>{{item.name}}</p>
                <span><i class="iconfont icon-erji"></i>{{ item.playCount | playCountData }}</span>
              </router-link>
            <!-- </li> -->
          <!-- </router-link> -->
        </ul>
      </div>
    </div>

 <!-- Swiper -->
    <!-- 猜你喜欢滑动 -->
    <div class="swiper-container swiper-container-01">
        <!-- <div class="title"><span class="like">猜你喜欢</span><span class="more">更多<span class="iconfont icon-xiangyoujiantou arright"></span></span></div> -->
        <router-link to="/more" tag="div" class="title"><span class="like">猜你喜欢</span><span class="more">更多<span class="iconfont icon-xiangyoujiantou arright"></span></span></router-link>
        
        <div class="swiper-wrapper">
          <router-link tag="div" class="swiper-slide item"  v-for="item in recommend.slice(0,6)" :key="item.id" :to="'/songlists?id='+item.id">
            <!-- <div class="swiper-slide item"  v-for="item in recommend.slice(0,6)" :key="item.id" @click="slId(item.id)"> -->
              <div class="img">
              <img
                :src="item.picUrl"
              />
            </div>
            <p>{{item.name}}</p>
            <span><i class="iconfont icon-erji"></i>{{ item.playcount | playCountData }}</span>
            <!-- </div> -->
          </router-link>
        </div>
    </div>
    <!-- MV视频 -->
    <!-- <div class="swiper-container swiper-container-01">
        <div class="title"><span class="like">猜你喜欢</span><span class="more">更多<span class="iconfont icon-xiangyoujiantou arright"></span></span></div>
        <router-link to="/more" tag="div" class="title"><span class="like">精选视频</span><span class="more">更多<span class="iconfont icon-xiangyoujiantou arright"></span></span></router-link>
        
        <div class="swiper-wrapper">
            <div class="swiper-slide item"  v-for="item in mvList.slice(0,2)" :key="item.id" @click="MVid(item.id)">
              <router-link to="/MV" class="swiper-slide item" tag="div" v-for="item in mvList.slice(0,6)" :key="item.id" @click="MVid(item.id)">
                <div class="img">
                  <img
                    :src="item.cover"
                  />
                </div>
                <p>{{item.name}}</p>
                <span><i class="iconfont icon-bofang"></i>{{ item.playCount | playCountData }}</span>
            </div>
            </router-link>
        </div>
    </div> -->


    <!-- 精选视频 -->
    <div class="remLists">
      <!-- <div class="title"><span>精选视频</span></div> -->
      <router-link to="/more" tag="div" class="title"><span>精选视频</span><span class="more">更多<span class="iconfont icon-xiangyoujiantou arright"></span></span></router-link>
      <div class="content MV">
        <ul>
          <!-- <router-link to="/MV" tag="li" v-for="item in mvList.slice(0,2)" :key="item.id" @click="MVid(item.id)"> -->
            <li  v-for="item in mvList.slice(0,2)" :key="item.id" @click="MVid(item.id)">
              <div class="img">
                <img
                  :src="item.cover"
                />
              </div>
              <p>{{item.name}}</p>
              <span><i class="iconfont icon-bofang1 bofang1"></i>{{ item.playCount | playCountData }}</span>
            </li>
          <!-- </router-link> -->
        </ul>
      </div>
    </div>
    
    <!-- 每日推荐歌曲 -->
    <div class="swiper mySwiper swiperA">
      <div class="resongsTitle"><span class="rsTitle">每日推荐</span></div>
      <!-- <router-link to="/more" tag="div" class="resongsTitle"><span class="rsTitle">每日推荐</span></router-link> -->
      <!-- <span class="more">更多<span class="iconfont icon-xiangyoujiantou arright"></span></span> -->
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <div class="item" v-for="item in resongs.slice(0,4)" :key="item.id" @click="getID(item.id)">
            <div class="resongsImg">
              <img :src="item.al.picUrl" alt="">
            </div>
            <div class="resongsText">
              <h4>{{item.name}}</h4><p>{{item.ar[0].name}}</p>
            </div>
            <div class="bofang">
              <span class="iconfont icon-bofang1 bf"></span>
            </div>
          </div>
        </div>
        <div class="swiper-slide">
          <div class="item" v-for="item in resongs.slice(4,8)" :key="item.id" @click="getID(item.id)">
            <div class="resongsImg">
              <img :src="item.al.picUrl" alt="">
            </div>
            <div class="resongsText">
              <h4>{{item.name}}</h4><p>{{item.ar[0].name}}</p>
            </div>
            <div class="bofang">
              <span class="iconfont icon-bofang1 bf"></span>
            </div>
          </div>
        </div>
        <div class="swiper-slide">
          <div class="item" v-for="item in resongs.slice(8,12)" :key="item.id" @click="getID(item.id)">
            <div class="resongsImg">
              <img :src="item.al.picUrl" alt="">
            </div>
            <div class="resongsText">
              <h4>{{item.name}}</h4><p>{{item.ar[0].name}}</p>
            </div>
            <div class="bofang">
              <span class="iconfont icon-bofang1 bf"></span>
            </div>
          </div>
        </div>
        <div class="swiper-slide">
          <div class="item" v-for="item in resongs.slice(12,16)" :key="item.id" @click="getID(item.id)">
            <div class="resongsImg">
              <img :src="item.al.picUrl" alt="">
            </div>
            <div class="resongsText">
              <h4>{{item.name}}</h4><p>{{item.ar[0].name}}</p>
            </div>
            <div class="bofang">
              <span class="iconfont icon-bofang1 bf"></span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- <footer-nav></footer-nav> -->

  </div>
</template>

<script>
import {getBanner,getPersonalizedr,getRecommendResource,getRecommendSongs,getPlaylistDetail,getMvAll} from "../api/recommend";
import headerNav from "../components/base/headerNav.vue";

// https://3.swiper.com.cn/demo/index.html
import Swiper from 'swiper';


export default {
  data(){
    return {
      imgs:null,
      Personalizedr:null,
      recommend:[],
      resongs:[],
      num:5,
      id:null,// 歌单的id值
      mvList:[],// 视频列表
      playlist:[],// 歌单歌曲
    }
  },
  methods:{
    // 获取MVid
    MVid(id){
      this.$router.push({name:"MV",params:{id:id}})
      this.$emit("get-mv-id",id)
    },
    // 轮播图
    getBannerFun(){
      getBanner().then(data=>{
        this.imgs = data.banners
      })
    },
    // 推荐歌单
    getPersonalizedrFun(){
      getPersonalizedr({limit:6}).then(data=>{
        // console.log(data.result);
        this.Personalizedr = data.result;
      })
    },
    // 猜你喜欢
    getRecommendResourceFun(){
      getRecommendResource().then(data=>{
        this.recommend = data.recommend
      })
    },
    // 每日推荐歌曲
    getRecommendSongsFun(){
      getRecommendSongs().then(data=>{
        this.resongs = data.data.dailySongs;
      })
    },
    // 获取歌单歌曲
    getPlaylistDetailFun(id){
      getPlaylistDetail({id:id}).then(data=>{
        console.log("歌曲",data.playlist)
        this.playlist = data.playlist
        this.$emit("get-ssongslistFun",this.playlist)
      })
    },
    // 获取全部MV
    getMvAllFun(){
      getMvAll().then(data=>{
        console.log(data.data)
        this.mvList = data.data
      })
    },
    // 获取每日推荐单曲id值
    getID(id){
      this.$emit("get-player-id",id)
    },
  },
  created(){
    this.getBannerFun(); //获取轮播图
    this.getPersonalizedrFun(); //获取推荐歌单
    this.getRecommendResourceFun();// 获取每日推荐歌单(猜你喜欢)
    this.getRecommendSongsFun();// 获取每日推荐歌曲
    this.getMvAllFun();// 获取MV
    
    window.document.body.style.backgroundColor='#fff';
  },
  components:{
    headerNav,
    // footerNav
  },
  // 过滤器
  filters:{
    playCountData(value){
      let w = value > 10000? value / 10000 : value; // 万计算
      let y = w > 10000? parseInt(w/10000)+"亿": parseInt(w) + "万";//亿计算
      return y;
    }
  },
  mounted(){
    new Swiper('.swiper-container-01', {
        pagination: '.swiper-pagination-01',
        slidesPerView: 3,  //显示个数
        paginationClickable: false,// 指示点点击
        observer:true,
        observeParents:false,
        spaceBetween: 8,
        freeMode: true, // 不自动贴合模式
        // spaceBetween: 30 //div之间间距
    });
    new Swiper('.swiperA', {
      pagination: '.swiper-pagination',
      slidesPerView: 'auto',  //显示个数
      paginationClickable: false,// 指示点点击
      observer:true,
      observeParents:false,
      freeMode: false, // 不自动贴合模式
    });
  },
  

};
</script>

<style lang="less">
body{
  background-color: #fff;
}
.banner {
  &::before {
    content: "";
    display: block;
    height: 124px;
    background-color: #d44439;
    position: absolute;
    width: 100%;
    z-index: -1;
  }
  position: relative;
  .imgs {
    position: relative;
    left: 0px;
    right: 0px;
    top: 0px;
    margin: auto;
    width: 96%;
    border-radius: 4px;
    overflow: hidden;
    img {
      width: 100%;
    }
  }
}

.remLists {
  .title {
    height: 60px;
    line-height: 60px;
    text-indent: 5px;
    font-size: 16px;
    color: #000;
    font-weight: bold;
    
  }
  .content {
    ul {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      li {
        flex: 0 0 32%;
        position: relative;
        span {
          position: absolute;
          top: 0px;
          right: 0px;
          color: #fff;
          font-size: 10px;
          i {
            font-size: 15px;
            vertical-align: middle;
          }
        }
        .img {
          min-height: 50px;
          width: 100%;
          border-radius: 3px;
          img {
            width: 100%;
            border-radius: 3px;
          }
        }
        p {
          font-size: 12px;
          color: #565658;
          line-height: 15px;
          padding: 5px;
          margin-bottom: 10px;
          height: 26px;
          overflow: hidden;
        }
      }
    }
  }
}
.remLists {
  .title {
    height: 60px;
    line-height: 60px;
    text-indent: 5px;
    font-size: 16px;
    color: #000;
    font-weight: bold;
    
  }
  .content.MV {
    width: 96%;
    margin: 0px auto;
    ul {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      li {
        flex: 0 0 48%;
        position: relative;
        span {
          position: absolute;
          top: 0px;
          right: 0px;
          color: #fff;
          font-size: 10px;
          i.bofang1{
            font-size: 12px;
            vertical-align: middle;
          }
        }
        .img {
          min-height: 50px;
          width: 100%;
          border-radius: 3px;
          img {
            width: 100%;
            border-radius: 3px;
          }
        }
        p {
          font-size: 12px;
          color: #565658;
          line-height: 15px;
          padding: 5px;
          margin-bottom: 10px;
          height: 26px;
          overflow: hidden;
        }
      }
    }
  }
}
.title {
    height: 60px;
    line-height: 60px;
    text-indent: 5px;
    font-size: 16px;
    color: #000;
    display: flex;
    justify-content: space-between;
    .like{
      font-weight: bold;
    }
    .more{
      font-size: 13px;
      color: #999;
      margin-right: 5px;
      .arright{
        font-size: 12px;
      }
    }
  }
.swiper-wrapper{
    // padding-left: 6px;
    .swiper-slide.item{
      flex: 0 0 30%;
      position: relative;
      margin-left: 6px;
      .img{
        background-color: aqua;
        min-height: 50px;
        width: 100%;
        border-radius: 3px;
        img{
          width: 100%;
          border-radius: 3px;
        }
      }
      p {
        font-size: 12px;
        color: #565658;
        line-height: 15px;
        padding: 5px;
        margin-bottom: 10px;
        height: 26px;
        overflow: hidden;
      }
      span {
        position: absolute;
        top: 0px;
        right: 0px;
        color: #fff;
        font-size: 10px;
        i {
          font-size: 15px;
          vertical-align: middle;
        }
      }
    }
  }
.resongs{
  .resongsTitle {
    height: 60px;
    line-height: 60px;
    text-indent: 5px;
    font-size: 16px;
    color: #000;
    display: flex;
    justify-content: space-between;
    .rsTitle{
      font-weight: bold;
    }
    .more{
      font-size: 13px;
      color: #999;
      margin-right: 5px;
      .arright{
        font-size: 12px;
      }
    }
  }
  ul{
    list-style: none;
    li{
      width: 96%;
      margin: 0px auto;
      padding: 10px 0px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #ccc;
      .resongsImg{
        background-color: pink;
        width: 60px;
        height: 60px;
        border-radius: 4px;
        overflow: hidden;
        img{
          width: 100%;
          height: 100%;
        }
      }
      .resongsText{
        flex: 4;
        padding-left: 10px;
        h4{
          width: 240px;
          font-weight: 700;
          display: inline-block;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        p{
          width: 240px;
          font-size: 14px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          color: #999;
          overflow: hidden;
        }
      }
      .bofang{
        border-radius: 50%;
        width: 30px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        .bf{
          font-size: 16px;
          margin-left: 3px;
          color: #ccc;
        }
      }
    }
  }
}
.swiper.swiperBox.resongs{
  width: 100%;
  overflow: hidden;
  .SWul{
    list-style: none;
    .SWli{
      width: 96%;
      margin: 0px 1px;
      padding: 10px 0px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #ccc;
      .resongsImg{
        background-color: pink;
        width: 60px;
        height: 60px;
        border-radius: 4px;
        overflow: hidden;
        img{
          width: 100%;
          height: 100%;
        }
      }
      .resongsText{
        flex: 4;
        padding-left: 10px;
        h4{
          width: 240px;
          font-weight: 700;
          display: inline-block;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        p{
          width: 240px;
          font-size: 14px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          color: #999;
          overflow: hidden;
        }
      }
      .bofang{
        border-radius: 50%;
        width: 30px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        .bf{
          font-size: 16px;
          margin-left: 3px;
          color: #ccc;
        }
      }
    }
  }
}
div.swiperA{
      overflow: hidden;
      text-align: left;
      .resongsTitle {
        height: 60px;
        line-height: 60px;
        text-indent: 5px;
        font-size: 16px;
        color: #000;
        display: flex;
        justify-content: space-between;
        .rsTitle{
          font-weight: bold;
        }
        .more{
          font-size: 13px;
          color: #999;
          margin-right: 5px;
          .arright{
            font-size: 12px;
          }
        }
      }
      div.swiper-wrapper{
        div.swiper-slide{
          background-color: white;
          overflow: hidden;
          div.item{
            width: 96%;
            margin: 0px auto;
            padding: 10px 0px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid #ccc;
            .resongsImg{
              background-color: pink;
              width: 60px;
              height: 60px;
              border-radius: 4px;
              overflow: hidden;
              img{
                width: 100%;
                height: 100%;
              }
            }
            .resongsText{
              flex: 4;
              padding-left: 10px;
              h4{
                width: 240px;
                font-weight: 700;
                display: inline-block;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
              p{
                width: 240px;
                font-size: 14px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                color: #999;
                overflow: hidden;
              }
            }
            .bofang{
              border-radius: 50%;
              width: 30px;
              height: 30px;
              line-height: 30px;
              text-align: center;
              .bf{
                font-size: 16px;
                margin-left: 3px;
                color: #ccc;
              }
            }
          }
        }
      }
  }
</style>
